<template>
  <div class="amap-container">
    <!-- 地图容器 -->
    <div id="amapContainer" style="width: 100%; height: 500px;"></div>
    <h3>地理编码（地址转坐标）</h3>
    <el-input v-model="geocodeAddress" placeholder="请输入地址" clearable :style="{width: '300px'}"></el-input>
    <el-button type="primary" @click="getLandmark">查询</el-button>
    <h3>位置</h3>
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' ,
      value: 'code',
      label: 'name',
      children: 'children',}"
      @change="handleChange"
      class="custom-cascader"></el-cascader>
    <h3>具体位置</h3>
    <el-input v-model="address" placeholder="请输入具体地址" clearable :style="{width: '300px'}"></el-input>



    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>

</template>

<script>

import {getLandmark, getTreeList} from "@/api/list/list";

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 级联选择器
      value: [],
      options: [],
      address: null,
      map: null,
      geocoder: null,
      placeSearch: null,
      driving: null,
      geocodeAddress: '北京市天安门',
      geocodeResult: null,
      searchKeyword: '餐厅',
      startPoint: '北京市天安门',
      endPoint: '北京大兴国际机场',
      Latitude: 116.407387,
      Longitude: 39.904179,
      debugInfo: '' // 用于调试的信息
    }
  },
  mounted() {
    this.initMap();
    this.treeList();
  },
  methods: {
    initMap() {
      if (window.AMap) {
        this.createMap();
      } else {
        const script = document.createElement('script');
        script.src = 'https://webapi.amap.com/maps?v=2.0&key=f6a20ff6b2eea9122f5c0a15411a513c';
        script.onload = () => {
          this.createMap();
        };
        script.onerror = () => {
          console.error('高德地图SDK加载失败');
          this.debugInfo = '高德地图SDK加载失败';
        };
        document.head.appendChild(script);
      }
    },

    createMap() {
      this.map = new AMap.Map('amapContainer', {
        zoom: 10,
        center: [this.Latitude, this.Longitude],
        mapStyle: 'amap://styles/normal'
      });

      AMap.plugin(['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Driving'], () => {
        this.geocoder = new AMap.Geocoder({
          city: '天津'
        });

        this.placeSearch = new AMap.PlaceSearch({
          map: this.map,
          pageSize: 10,
          pageIndex: 1
        });

        this.driving = new AMap.Driving({
          map: this.map,
          policy: AMap.DrivingPolicy.LEAST_TIME
        });

        this.addMarker([this.Latitude, this.Longitude], this.geocodeAddress);
        this.debugInfo = '地图和插件初始化成功';
        console.log('地图和插件初始化成功');
      });
    },
    // 级联选择器
    handleChange(value) {
      console.log(value);
    },
    // 级联选择器数据接口
    treeList() {
      getTreeList().then(response => {
        // 处理响应数据
        this.options = response.data;
      })
        .catch(error => {
          // 处理错误
          console.error('请求失败:', error);
        });
    },
    getLandmark() {
      const landmarkName = this.geocodeAddress;
      console.log(landmarkName);
      getLandmark(landmarkName).then(response => {
        // 处理响应数据
        this.Latitude = response.data.latitude
        this.Longitude = response.data.longitude
        this.createMap();
      })
        .catch(error => {
          // 处理错误
          console.error('请求失败:', error);
        });
    },

    // 添加标记点
    addMarker(position, title) {
      const marker = new AMap.Marker({
        position: position,
        title: title,
        draggable: false,
        cursor: 'move',
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
      });

      marker.setMap(this.map);
      return marker;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      // console.log("uygvyuhbluby"+this.dialogImageUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log("uygvyuhbluby"+this.dialogImageUrl);
      this.dialogVisible = true;
    }
  },
}
</script>

<style scoped>
.amap-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.custom-cascader {
  width: 400px; /* 设置需要的宽度 */
}
</style>
